import React, { PureComponent } from 'react'

import Item from './item';

import { Row } from 'antd';
import { Zoom, PointC, ImgC, Point, Container, MyImg } from './styled'
import { BASE_URL } from '@/config/query';
import request from '@/utils/request';

interface P {
  id: string;
  gap?: number;
}

class MapSelet extends PureComponent<P, any> {
  imgc: any;
  imgi: any;

  constructor(props) {
    super(props);
    this.state = {
      points: [],
      width: 100,
      zoom: 0,
      rotate: 0,
      point: {},
    }
  }

  async componentDidMount() {
    const [base, device] = await Promise.all([
      request(`${BASE_URL}/floor_plan/detail/${this.props.id}`),
      request(`${BASE_URL}/device/map/list_by_floor`, { id: this.props.id }),
    ])

    this.setState({
      image: base.floorPlan,
      points: Array.isArray(device) ? device.filter(u => !!u.floorPlanX || !!u.mapX).map(v => ({
        left: v.floorPlanX || v.mapX,
        top: v.floorPlanY || v.mapY,
        kind: v.kind,
        id: v.id,
        show: true,
        status: +v.runStatus
      })) : []
    })
  }

  handleZoom = (v) => {
    const { gap = 5 } = this.props;
    const { width, points = [], zoom } = this.state;
    const z = v * gap;

    this.setState({
      width: width + z,
      height: this.state.height / (1 + zoom / 100) * (1 + (z + zoom) / 100),
      zoom: z + zoom,
      points: Array.isArray(points) ? points.map(v => ({
        ...v,
        left: +v.left + (+v.left / z / 100) * (1 + (z + zoom) / 100),
        top: +v.top + (+v.top / z / 100) * (1 + (z + zoom) / 100),
      })) : []
    });
  }

  handleFilter(list) {

    const { points } = this.state;
    this.setState({ points: points.map(v => ({ ...v, show: (list).includes(v.kind)})) })
  }

  getPosition = ({ left, top }, rotate) => {
    let ans = {};

    switch (rotate % 4) {
      case 0: {
        ans = { left, top }
        break;
      }
      case 1: {
        ans = { left: 100 - top, top: left }
        break;
      }
      case 2: {
        ans = { left: 100 - left, top: 100 - top };
        break;
      }
      case 3: {
        ans = { left: top, top: 100 - left }
        break
      }
      default:
    }
    return ans
  }


  render() {

    const { image } = this.state;
    const { width, height, rotate, points } = this.state;

    console.log(points)

    return (
      <Container style={{ display: 'flex', height: '650px' }}>
        <Row style={{ width: "80%", height: "100%" }}>
          <ImgC style={{ height: '100%' }}>
            <PointC height={height} width={width} ref={ref => this.imgc = ref}>
              {
                Array.isArray(points) && points.map(v => v.show && <Point
                  src={require(`../../assets/images/icon/device/${STATUS[v.status]}/${v.kind}.png`)}
                  key={v.id}
                  {...this.getPosition(v, rotate)}
                />)
              }
            </PointC>
            <MyImg
              src={image}
              alt="展示图片"
              width={width}
              rotate={rotate * 90}
              ref={ref => this.imgi = ref}
              onLoad={e => this.setState({
                height: e.target.height,
                points
              })}
            />
          </ImgC>
        </Row>
        <Row style={{ width: "20%", height: "100%", overflowY: 'hidden' }}>
          <Row style={{ height: '95%' }}><Item filter={(v) => this.handleFilter(v)} /></Row>
          <Row style={{ height: '5%' }} type="flex" justify="start">
            <Zoom type="zoom-in" onClick={this.handleZoom.bind(this, 1)} />
            <Zoom type="zoom-out" onClick={this.handleZoom.bind(this, -1)} />
          </Row>
        </Row>
      </Container>
    )
  }
}


export default MapSelet;

const STATUS = new Proxy({
  1: 'normal',
  2: 'gray',
  3: 'error',
  4: 'orange',
}, {
  get(target, props) {
    if (!(props in target)) {
      return {}
    }
    return target[props];
  }
})